<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    html, body {
      margin: 0;
      width: 100%;
      height: 100%;
      font-size: 14px;
    }
    .options {
      position: fixed;
      top: 1.5vw;
      left: 1.5vw;
      user-select:none;
    }
    #btn {
      padding: 5px 12px;
      border: 1px solid rgba(0,0,0,.15);
      border-radius: 4px;
      box-shadow: 0 3px 6px rgba(0,0,0,.175);
      cursor: pointer;
      transition: all 0.1s;
      background-color: #fff;
    }
    #btn::after {
      content: "▼";
      font-size: 10px;
      margin-left: 5px;
    }
    #btn:hover {
      background-color: #eee;
      transition: all 0.1s;
    }
    #menu {
      padding: 6px 3px;
      position: absolute;
      top: 26px;
      left: 0;
      width: 120px;
      background-color: #fff;
      border: 1px solid rgba(0,0,0,.15);
      border-radius: 4px;
      box-shadow: 0 6px 12px rgba(0,0,0,.175);
    }
    #menu span {
      display: block;
      padding: 0 20px;
      line-height: 30px;
      cursor: pointer;
      transition: all 0.1s;
    }
    #menu span:first-child {
      border-bottom: 1px solid #ddd;
    }
    #menu span:hover {
      background-color: #fef;
      transition: all 0.1s;
    }
    .hide {
      display: none;
    }
    #shade {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, .4);
      box-shadow: 0 5px 15px rgba(0,0,0,.5);
    }
    #popup {
      width: 600px;
      margin: 40px auto;
      background-color: #fff;
      border-radius: 6px;
      
      box-sizing: border-box;
    }
    #title {
      font-size: 18px;
      padding: 16px 20px;
    }
    #content {
      padding: 20px;
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
    }
    #content span {
      font-weight: 700;
      display: block;
      margin-bottom: 10px;
      margin-top: 6px;
    }
    #content input {
      width: 535px;
      color: #555;
      border: 1px solid #ccc;
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
      padding: 8px 12px;
      border-radius: 3px;
      margin-bottom: 6px;
    }
    .footer {
      padding: 20px;
      text-align: right;
    }
    .footer span {
      border: 1px solid #ccc;
      border-radius: 3px;
      margin-right: 8px; 
      padding: 6px 16px;
      transition: all 0.1s;
      cursor: pointer;
    }
    #close:hover {
      background-color: #eee;
      transition: all 0.1s;
    }
    #commit {
      color: #fff;
      background-color: rgb(125, 127, 255);
      transition: all 0.1s;
    }
    #commit:hover {
      background-color: rgb(125, 127, 196);
      transition: all 0.1s;
    }
  </style>
</head>
<body>
  <div class="options">
    <span id="btn">选项</span>
    <div id="menu" class="hide">
      <span id="query">查询</span>
      <span id="goto">想去</span>
    </div>
  </div>
  <div id="shade" class="hide">
    <div id="popup">
      <div id="title"></div>
      <div id="content"></div>
      <div class="footer">
        <span id="close">关闭</span>
        <span id="commit">查询</span>
      </div>
    </div>
  </div>

  <script>
    window.onload = () => {
      const shade = document.getElementById('shade');
      const menu = document.getElementById('menu');
      const content = document.getElementById('content');
      const title = document.getElementById('title');

      document.getElementById('btn').addEventListener('click', () => {
        menu.classList.toggle('hide');
      });
      document.getElementById('goto').addEventListener('click', () => {
        title.innerText = '想去';
        content.innerHTML = '<label><span>起点：</span><input type="text"></label><label><span>终点：</span><input type="text"></label>';
        shade.classList.remove('hide');
        menu.classList.add('hide');
      });
      document.getElementById('query').addEventListener('click', () => {
        title.innerText = '查询';
        content.innerHTML = '<label><span>地点：</span><input type="text"></label>';
        shade.classList.remove('hide');
        menu.classList.add('hide');
      });
      document.getElementById('close').addEventListener('click', () => {
        shade.classList.add('hide');
      });
      shade.addEventListener('click', () => {
        shade.classList.add('hide');
      },true);
      document.getElementById('popup').addEventListener('click', () => {
        shade.classList.remove('hide');
      },true);
    }
  </script>
</body>
</html>